<template>
	<view class="container">
		<view v-for="(item,index) in list" :key="index" class="item">
			<view class="">
				<u-image width="100%" height="388rpx" border-radius="20rpx" :src="item.resURL" @click="imageClick(item.resURL)"></u-image>
			</view>
			<view class="foot">
				<text class="name">{{item.title}}{{format(item.beginAt, 'yyyy/mm/dd')}}～{{format(item.endAt, 'yyyy/mm/dd')}}</text>
				<text class="time">{{format(item.created, 'yyyy/mm/dd hh:MM')}}</text>
			</view>
		</view> 
		<fab v-if="appType === 'app-tch' || appType === 'mp-tch'" @fabClick="fabClick"></fab>
		
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import Fab from '@/components/fab.vue'
	import { getCookBook } from '@/api/recipe.js'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import {
		mapState,
	} from 'vuex';
	export default {
		components: {
			Fab
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
			}),
		},
		data() {
			return {
				list: [],
				status: 'loadmore',
				page: -1,
			}
		},
		onLoad() {
			this.getRecipe(this.page);
		},
		methods: {
			getRecipe(page) {
				getCookBook(page + 1, 10).then(res => {
					console.log(res);
					if (res.data.last) {
						this.status = 'nomore';
					}
					this.page = res.data.number;
					if (this.page === 0) {
						this.list = res.data.content;
					} else {
						this.list = this.list.concat(res.data.content);
					}
				})
			},
			
			loadMore() {
				if (this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				this.getRecipe(this.page);
			},
			
			onReachBottom() {
				this.loadMore();
			},
			
			fabClick() {
				let that = this;
				uni.navigateTo({
					url: '/pages_sub/recipe/recipe-add-page',
					events: {
						addSuccessEvent: function(data) {
							that.getRecipe(-1);
						},
					},
				})
			},
			
			imageClick(thumb) {
				uni.previewImage({
					urls: [thumb]
				})
			},
			
			format(timestamp, format) {
				return formatDateByTimestamp(timestamp, format)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding: 30rpx;
	}
	.item{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	.foot{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		
		.name{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
		.time{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
</style>
